<template>
	<view class="u-p-t-10 ">

		<u-checkbox-group v-model="activelist">
			<scroll-view scroll-y="true" class="scroll-list u-border-right">
				<view @click="showlist1(item, i)" class="u-flex u-p-8 u-flex-between" v-bind:class="a_id == i ? 'active' : ''" v-for="(item, i) in List" :key="item.value">
					<view class="u-flex">
						<u-checkbox size="16" :name="item.value"></u-checkbox>
						<text>{{ item.label }}</text>
					</view>

					<u-icon size="28rpx" name="arrow-right"></u-icon>
				</view>
			</scroll-view>

			<scroll-view scroll-y="true" class="scroll-list u-border-right">
				<view
					@click="showlist2(item, i)"
					class="u-flex u-p-8 u-flex-between"
					v-bind:class="b_id == i ? 'active' : ''"
					v-for="(item, i) in list1"
					:key="item.value"
					v-if="list1.length > 0"
				>
					<view class="u-flex">
						<u-checkbox :name="item.value"></u-checkbox>
						<text>{{ item.label }}</text>
					</view>
					<u-icon size="28rpx" name="arrow-right"></u-icon>
				</view>
			</scroll-view>

			<scroll-view scroll-y="true" class="scroll-list">
				<view class="u-flex u-p-10" v-for="(item, i) in list2" :key="item.value">
					<u-checkbox :name="item.value"></u-checkbox>
					<text>{{ item.label }}</text>
				</view>
			</scroll-view>
			<!-- <view class="" v-show="false"><u-checkbox v-for="(item,i) in allcate" :key="item.value" :name="item.value">
			</u-checkbox></view> -->
		</u-checkbox-group>
		<view class="u-flex u-flex-items-center footer">
			<u-button size="small" shape="circle" @click="close">取消</u-button>
			<u-button class="u-m-l-60" type="primary" size="small" shape="circle" @click="changecheck">确定</u-button>
		</view>
		
		
	</view>
</template>

<script>
export default {
	name: 'cascader',
	data() {
		return {
			a_id: -1,
			b_id: -1,
			activelist: [],
			list1: [],
			list2: []
		};
	},
	props: {
		List: {
			type: Array,
			default: function() {
				return [];
			}
		},
		allcate:{
			type: Array,
			default: function() {
				return [];
			}
		}
	},

	methods: {
		init(list) {
			this.activelist = list;
		},
		showlist1(item, i) {
			this.list1 = item.children;
			this.list2 = [];
			this.a_id = i;
			this.b_id = -1;
		},
		showlist2(item, i) {
			this.list2 = item.children;
			this.b_id = i;
		},
		changecheck() {
			this.$emit('change',this.activelist);
		},
		close(){
			this.$emit('close');
		}
	}
};
</script>

<style lang="scss">
.scroll-list {
	height: 30vh;
	box-sizing: border-box;
	font-size: 26rpx;
	flex: 1;
	.active {
		background: rgb(246, 247, 250);
	}
}
.footer {
	height: 80rpx;
	padding: 10rpx 20rpx;
}
</style>
